@import (reference) './../../../common/css/mixin.module.less';

.draggable-tabs {
  position: relative;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.5;
  overflow: hidden;
  zoom: 1;

  .tabs-bar {
    .flex-horizontal(@justify-content: space-between);
    margin: 0 0 16px 0;
    border-bottom: 1px solid #e8e8e8;
    outline: none;
    transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

    .tab-list-wrap {
      flex: none;
      position: relative;
      transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .tab-list {
      .flex-horizontal();
      // padding-left: 20px;

      .tab-item {
        padding: 16px;
        cursor: pointer;

        &.tab-item-active {
          color: #3e5bff;
          border-bottom: 2px solid #3e5bff;
        }
      }
    }

    .tabs-ink-bar {
      display: none;
      position: absolute;
      bottom: 1px;
      left: 0;
      z-index: 1;
      height: 2px;
      background-color: #3e5bff;
      transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
                  width 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
                  left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform-origin: 0 0;
    }

    .extra-content {
      flex: none;
    }
  }

  .tabs-content-wrap {
    .flex-horizontal();
    transition: margin-left .3s cubic-bezier(.645, .045, .355, 1);
    will-change: margin-left;
    width: 100%;

    .tab-content {
      flex-shrink: 0;
      width: 100%;
      transition: opacity .45s;

      &.tab-content-active {
        opacity: 1;
      }

      &.tab-content-deactive {
        padding: 0;
        height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
      }
    }
  }
}
